<template>
    <div class="da">
        <!-- 头部分 -->
        <div class="tou">
            <span class="span1">订单详情</span>
        </div>

        <!-- 红色的 -->
        <div class="dai">
            <span class="d_sp">{{data.shop_status}}</span>
            <img class="imgx" src="../../static/cancel.png" alt="">
        </div>

        <!-- 固定的住址 -->
        <div class="address">
            <img src="../../static/wei.png" class="a_wei" alt="">
            <span class="a_sp">小二郎</span>
            <span class="a_tell">86-15721406057</span>
            <span class="a_add">河南省安阳市文峰区高庄乡朱家营村</span>
        </div>


        <!-- 这个是内容 -->
        <div class="nei">
            <span class="n_sp">{{data.shop_store}}</span>
            <img class="n_img" :src="data.shop_img" alt="">
            <span class="n_name">{{data.shop_name}}</span>
        </div>

        <!-- 订单信息 -->
        <div class="xin">
        </div>

        <!-- 底部导航 -->
        <div class="dao">
            <button class="d_mai">联系卖家</button>
            <button class="d_qu">取消订单</button>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return{
            data:'',
            id:'',
        }
    },
    created(){
        console.log(this.$route.params.id)
        var id=this.$route.params.id;
        var t=this;
        this.$axios({
            url: '/info',
            params:{
                id:id
            }
        }).then(function(res){
            console.log(res)
            t.data=res.data.data;
            // console.log(t.data)
        })
    }
}
</script>


<style lang="">
.n.name{
    position:fixed;
    top: 320px;
    left: 40px;
    background-color: #e4af7d;
}
.n_img{
    width: 110px;
    height: 110px;
    border-radius: 10px;
    position:fixed;
    top: 320px;
    left: 40px;
}
.n_sp{
    position:fixed;
    top: 290px;
    left: 40px;
}
.a_add{
    width: 270px;
    position:fixed;
    top: 220px;
    left: 107px;
    font-size: 13px;
    text-align: left;
}
.a_tell{
    width: 120px;
    position:fixed;
    top: 197px;
    left: 150px;
    font-size: 10px;
    color: #b3b3b3;
}
.a_sp{
    width: 70px;
    position:fixed;
    top: 195px;
    left: 90px;
    font-size: 10px;
}
.a_wei{
position:fixed;
    top: 200px;
    left: 50px;
}
.d_sp{
    width: 100px;
    color: rgb(255, 255, 255);
    position:fixed;
    top: 140px;
    left: 70px;
}
.imgx{
    width: 30px;
    height: 30px;
    position:fixed;
    top: 135px;
    left: 40px;
}
.d_mai{
    width: 80px;
    height: 30px;
    border-radius: 20px;
    border:1px solid #e4af7d;
    background-color: white;
    color: #e4af7d;
    font-weight: 800;
    margin-top: 20px;
    margin-left: 230px;
}
.d_qu{
    width: 80px;
    height: 30px;
    border-radius: 20px;
    border:1px solid #c1ab96;
    background-color: white;
    color: #c1ab96;
    font-weight: 800;
}
.dao{
height: 70px;
background-color: rgb(255, 255, 255);
position: fixed;
bottom: 0px;
left: 0;
width: 420px;
border-top: 1px solid rgb(228, 228, 228);
}
.address{
    width: 395px;
    height: 85px;
    background-color: rgb(255, 255, 255);
    position: fixed;
    top:180px;
    left:20px;
    border-radius: 10px;
    box-shadow: 0px 0px 40px 0px rgba(7, 7, 7, 0.5)
}
.xin{
    height: 230px;
    margin-top: 15px;
    background-color: white;
}
.nei{
    height: 300px;
    background-color: white;
}
.da{
    
    background-color: #eae9e5;
    
    width: 420px;
    border-radius: 10px 10px 0px 0px;
}
.dai{
    height: 110px;
    background-color: #971818;
    
    width: 420px;
}
.tou{
    height: 50px;
    
    width: 420px;
}
.span1{
    font-size: 130%;
    font-weight: 700;
  }
</style>